//机票列表组件

<template>
  <div class="flight-item">
    <div @click="isshow = !isshow">
      <!-- 显示的机票信息 -->
      <el-row type="flex" align="middle" class="flight-info">
        <el-col :span="6" class="flights-comp">
          <span>{{ flightData.airline_name }}</span> {{ flightData.flight_no }}
        </el-col>
        <el-col :span="12" class="flight-info-center">
          <!-- 以当前行分成三份，每份为8 -->
          <el-row type="flex" justify="space-between">
            <el-col :span="8" class="flight-airport">
              <strong>{{ flightData.dep_time }}</strong>
              <span>{{
                flightData.org_airport_name + flightData.org_airport_quay
              }}</span>
            </el-col>
            <el-col :span="8" class="flight-time">
              <span>{{ getDiff() }}</span>
            </el-col>
            <el-col :span="8" class="flight-airport">
              <strong>{{ flightData.arr_time }}</strong>
              <span>{{
                flightData.dst_airport_name + flightData.dst_airport_quay
              }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="sell-price">
          ￥<span class="sell-price">{{ flightData.base_price / 2 }}</span
          >起
        </el-col>
      </el-row>
    </div>
    <!-- 隐藏的机票信息 -->
    <div class="flight-recommend" v-show="isshow">
      <el-row
        type="flex"
        align="middle"
        class="flight-detail-info"
        v-for="(item, index) in flightData.seat_infos"
        :key="index"
      >
        <el-col :span="4">低价推荐</el-col>
        <el-col class="flight-sell-left" :span="12">
          <span>{{ item.name }}</span> | {{ item.supplierName }}
        </el-col>
        <el-col class="price" :span="4">￥{{ item.org_settle_price }}</el-col>
        <el-col class="choose-button" :span="4">
          <el-button type="warning" size="mini" @click="$router.push(`/air/order?id=${flightData.id}&seat_xid=${item.seat_xid}`)"> 选定 </el-button>
          <p>剩余：{{ item.discount }}</p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isshow: false,
    };
  },
  props: {
    flightData: {
      required: true, // 必须从父组件传过来航班信息
      type: Object, //信息内容以对象形式传递
      // 如果prop属性是对象或是数组，那默认值必须通过函数来设置
      default: () => {
        return {};
      },
    },
  },
  methods: {
    // 跳转到订单生成页
      // jumpToOrder(item){
      //   console.log(this.flightData)
      //   this.$router.push(`/air/order?id=${this.flightData.id}&seat_xid=${item.seat_xid}`)
      // },
    // 计算相差时间
    /*
    思路：把小时和分钟转换成分钟总数，再相减，如果相减结果小于0，说明跨天数了，应该加上一天的时长
    */
    getDiff() {
      let dep = this.flightData.dep_time.split(":"); // 字符串通过split()分割成数组["20","30"]
      let dest = this.flightData.arr_time.split(":");
      // 原来是字符串，需要换成数值
      let depFz = dep[0] * 60 + +dep[1];
      let destFz = dest[0] * 60 + +dest[1];
      // console.log(depFz,destFz)
      let diff = destFz - depFz;
      // console.log(diff);
      if (diff < 0) {
        // 加上一天的时长
        diff += 24 * 60;
      }
      return `${Math.floor(diff / 60)}时${diff % 60}分`;
    },
  },
};
</script>
<style lang="less" scoped>
.flight-item {
  border: 1px #ddd solid;
  margin-bottom: 10px;
  .flight-info {
    padding: 15px;
    cursor: pointer;
    .flights-comp,
    .sell-price {
      text-align: center;
    }
    .sell-price {
      span {
        font-size: 24px;
        color: orange;
        margin: 0 2px;
      }
    }
    .flight-info-center {
      padding: 0 30px;
      text-align: center;
      .flight-airport {
        strong {
          display: block;
          font-size: 24px;
          font-weight: normal;
        }
        span {
          font-size: 12px;
          color: #999;
        }
      }
      .flight-time {
        span {
          display: inline-block;
          padding: 10px 0;
          border-bottom: 1px #eee solid;
          color: #999;
        }
      }
    }
  }
  .flight-recommend {
    .flight-detail-info {
      background: #f6f6f6;
      border-top: 1px #eee solid;
      padding: 10px 20px;
      .flight-sell-left {
        font-size: 12px;
        span {
          color: green;
        }
      }
      .price {
        font-size: 20px;
        color: orange;
      }
      .choose-button {
        text-align: center;
        color: #666;
        button {
          display: block;
          width: 100%;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>